import { ElSelect } from 'element-plus'
import { FunctionalComponent } from 'vue'

interface SelectProps extends Partial<Omit<InstanceType<typeof ElSelect>, 'options'>> {
  options: Record<string, any>[]
  'value-key'?: string
  'label-key'?: string
}

export const QsSelect: FunctionalComponent<SelectProps> = (props) => {
  console.log(props)
  return (
    <ElSelect {...props}>
      {props.options.map((option) => (
        <ElSelect.Option
          label={option[props['label-key'] || 'label']}
          disabled={option.disabled}
          value={option[props['value-key'] || 'value']}
        ></ElSelect.Option>
      ))}
    </ElSelect>
  )
}

export default QsSelect
